<template>
   <div>

      <el-button type="text" @click="saveUI">添加员工</el-button>

      <el-form :inline="true" :model="formInline" class="demo-form-inline">
         <el-form-item label="员工姓名">
            <el-input v-model="formInline.name" placeholder="员工姓名"></el-input>
         </el-form-item>
         <el-form-item label="所属部门">
            <el-input v-model="formInline.deptName" placeholder="所属部门"></el-input>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
         </el-form-item>
      </el-form>

      <el-dialog :title="tishi" :visible.sync="dialogFormVisible">
         <el-form :model="form">
            <el-form-item label="员工姓名" :label-width="formLabelWidth">
               <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工年龄" :label-width="formLabelWidth">
               <el-input type="number" v-model="form.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工职位" :label-width="formLabelWidth">
               <el-input v-model="form.job" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工薪资" :label-width="formLabelWidth">
               <el-input type="number" v-model="form.salary" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工生日" :label-width="formLabelWidth">
               <div class="block">
                  <span class="demonstration"></span>
                  <el-date-picker v-model="form.entrydata" type="date" placeholder="选择日期">
                  </el-date-picker>
               </div>
            </el-form-item>
            <el-form-item label="上级领导" :label-width="formLabelWidth">
               <el-input type="number" v-model="form.managerid" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="所属部门" :label-width="formLabelWidth" >
               <el-select  v-model="form.deptid" placeholder="请选择部门">
               <el-option
                  v-for="item in list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name">
               </el-option>
            </el-select>
            </el-form-item>


         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitform">确 定</el-button>
         </div>
      </el-dialog>

      <el-table :data="tableData" stripe style="width: 100%">
         <el-table-column prop="id" label="编号" width="100">
         </el-table-column>
         <el-table-column prop="name" label="姓名" width="180">
         </el-table-column>
         <el-table-column prop="age" label="年龄" width="100">
         </el-table-column>
         <el-table-column prop="job" label="职位" width="180">
         </el-table-column>
         <el-table-column prop="salary" label="薪资" width="100">
         </el-table-column>
         <el-table-column prop="entrydate" label="日期" width="180">
         </el-table-column>
         <el-table-column prop="managerid" label="上级领导" width="100">
         </el-table-column>
         <el-table-column prop="deptid" label="所属部门" width="100">
         </el-table-column>
         <el-table-column label="操作" width="180">
            <template slot-scope="scope">
               <el-button type="danger" @click="del(scope.row)">删除</el-button>

               <el-button type="info" @click="update(scope.row)">修改</el-button>
            </template>

         </el-table-column>
      </el-table>
      <!-- <span class="demonstration">完整功能</span> -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
         :page-sizes="[5, 10, 15, 20]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
   </div>
</template>
 
<script>
export default {
   data() {
      return {
         tishi:"",
         currentPage: 1,
         dialogFormVisible: false,
         form: {
         },
         formInline: {
            deptName: "",
            name: ""
         },


         list: [],
         total: 0,
         formLabelWidth: '120px',
         tableData: [],
         currentPage: 1,
         pageSize: 5
      }
   },
   methods: {
      handleSizeChange(val) {
         console.log(`每页 ${val} 条`);
         this.pageSize = val
         this.getList()
      },
      onSubmit() {
         this.$axios.post("http://localhost:8080/emp/other", this.formInline).then(res => {
            this.tableData = res.data.data.list
            this.getList()
            this.total = res.data.data.total
         })
      },
      handleCurrentChange(val) {
         console.log(`当前页: ${val}`);
         this.currentPage = val
         this.getList()
      },
      saveUI() {
         this.tishi="添加员工"
         this.form = {}
         this.dialogFormVisible = true;
      },
      submitform() {
         if (this.form.id = null) {
            
            this.$axios.post("http://localhost:8080/emp", this.form.name,this.form.deptName).then(res => {
               if (res.data.code == 200) {
                  this.$message({
                     type: "success",
                     message: "添加成功"
                  })
               } else {
                  this.$message({
                     type: "false",
                     message: "添加失败"
                  })
               }
            })
            this.dialogFormVisible = false
            return
         }
         
         this.$axios.put("http:localhost:8080/emp", this.form).then(res => {
            if (res.data.code == 200) {
               this.$message({
                  type: "success",
                  message: "修改成功"
               })
               this.getList()
            } else {
               this.$message({
                  type: "false",
                  message: "修改失败"
               })
            }
         })

      },
      getList() {
         this.$axios.get(`http://localhost:8080/emp/${this.currentPage}/${this.pageSize}`).then(res => {
            this.tableData = res.data.data.pageInfo.list
            this.total = res.data.data.pageInfo.total
            this.list = res.data.data.deptList
         })
      },
      del(row) {
         this.$confirm("确认删除？").then(() => {
            this.$axios.delete(`http://localhost:8080/emp/${row.id}`).then(res => {
               if (res.data.code = 200) {
                  this.$message({
                     type: "success",
                     message: "删除成功"
                  })
               } else {
                  this.$message({
                     type: "false",
                     message: "删除失败"
                  })
               }
               this.getList()
            })
         })
      },
      update(row) {
         this.tishi="修改员工"
         this.form = row
         this.dialogFormVisible = true
      }

   },
   mounted() {
      this.getList()
   }
}
</script>